import { ELEMENT_TYPE, TEXT_TYPE, defaultTagRE } from "./config";

// 解析生成属性
function getProps(attrs) {
	let str = "";
	// 遍历属性
	attrs.forEach((attr) => {
		// 如果是样式属性 style="font-size:15px;color:red"
		if (attr.name === "style") {
			const obj = {};
			// 分割属性变成 -> {style:{font-size:'15px',color:'red'}}
			attr.value.split(";").forEach((item) => {
				// 去带空格再根据:分割
				const [key, value] = item.trim().split(":");
				obj[key] = value;
			});
			attr.value = obj;
		}
		str += `"${attr.name}":${JSON.stringify(attr.value)},`;
	});
	// 去掉最后一个,
	return `{${str.slice(0, -1)}}`;
}

// 解析元素的children属性
function getChild(child) {
	if (child && child.length > 0) {
		return `${child.map((c) => gen(c)).join(",")}`;
	} else {
		return false;
	}
}

// 处理节点
function gen(node) {
	// 判断是不是元素节点
	if (node.type === ELEMENT_TYPE) {
		return generate(node);
	} else if (node.type === TEXT_TYPE) {
		// 创建文本节点
		let text = node.text;
		// 处理插槽 {{}}
		const tokens = [];
		let match, index;
		// 让正则的lastIndex先指向0防止匹配第2次就不成功了
		let lastIndex = (defaultTagRE.lastIndex = 0);
		// 循环处理
		while ((match = defaultTagRE.exec(text))) {
			index = match.index;
			if (index > lastIndex) {
				// 往数组中添加
				tokens.push(JSON.stringify(text.slice(0, index)));
			}
			// 这里是{{}}中的值
			tokens.push(`_s(${match[1].trim()})`);
			// 改变lastIndex的位置
			lastIndex = index + match[0].length;
		}
		// 匹配之后剩余的
		if (lastIndex < text.length) {
			tokens.push(JSON.stringify(text.slice(lastIndex)));
		}
		// 返回拼接结果
		return `_v(${tokens.join("+")})`;
	}
}

// 解析ast生成元素代码
export function generate(el) {
	// 获取children节点
	const children = getChild(el.children);
	// 生成代码字符串返回
	return `_c("${el.tag}",${el.attrs.length ? getProps(el.attrs) : "undefined"}${
		children ? `,${children}` : ""
	})`;
}
